<template>
  <van-grid class="message-grid">
    <van-grid-item class="message-grid-item" v-for="(item,index) in messageItem" :key="index">
      <div @click="linkTo(item)">
        <!-- <van-image :src="item.icon" /> -->
        <van-icon class-prefix="iconfont icon" :name="item.icon"></van-icon>
        <br />
        <span>{{item.title}}</span>
      </div>
    </van-grid-item>
  </van-grid>
</template>

<script>
export default {
  name: "message-grid",
  data() {
    return {
      messageItem: [
        {
          icon: "message",
          name: "reply",
          title: "回复我的",
        },
        {
          icon: "message",
          name: "atme",
          title: "@我的",
        },
        {
          icon: "message",
          name: "like",
          title: "收到的赞",
        },
        {
          icon: "message",
          name: "system",
          title: "系统消息",
        },
      ],
    };
  },
  methods: {
    linkTo(message) {
      this.$router.push("/message/" + message.name);
    },
  },
};
</script>

<style>
.message-grid {
  font-size: small;
  margin: 5px 20px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px 0px #97979759;
}
.message-grid-item:first-of-type .van-grid-item__content {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.message-grid:last-of-type .van-grid-item__content {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.message-grid img {
  width: 40px;
  height: 40px;
}
</style>